<script>
import TabBar from '../components/TabBar.vue';
const deviceHeight = 750 / weex.config.env.deviceWidth * weex.config.env.deviceHeight;

const modal = weex.requireModule('modal')
export default {
    components: { TabBar },
    data() {
        return {
            refreshing: false,
            deviceHeight,
            activeMenu: 0
        }
    },
    computed: {
        tabData() {
            let data = this.$store.state.home.tabsData;
            return data;
        }
    },
    methods: {
        gotoSeach() {
            this.$router.push({
                name: 'search'
            })
        },
        changeTab(item, index) {
            this.activeMenu = index;
            this.$router.push({ name: pathName });
        },
        menuColor(index) {
            return this.activeMenu == index ? '#ed5b00' : '#747474';
        },
        menuBorderColor(index) {
            return this.activeMenu == index ? '#ed5b00' : '#fafafa';
        }
    }
}
</script>
<template>
    <div class="page">
        <div class="header">
            <div class="search-box">
                <image class="header-icon header-logo" style="width: 50px;height: 35px;" src="https://m.mi.com/component/header/img/logo_121d4a6.png"></image>
                <div type="text" class="search-input" @click="gotoSeach">
                    <!--<image class="search-icon" style="width: 35px;height: 30px;" src="https://m.mi.com/component/header/img/search_df67e2f.png"></image>-->
                    <text class="placeholder">搜索商品名称</text>
                </div>
                <image class="header-icon header-user" style="width: 35px;height: 42px;" src="https://m.mi.com/component/header/img/user_a70dc8e.png"></image>
            </div>
            <scroller class="header-menu" scroll-direction="horizontal" :show-scrollbar="false">
                <text class="header-menu-item" v-for="(item,$index) in tabData" :style="{'color':menuColor($index),'border-bottom-color':menuBorderColor($index)}" @click="changeTab(item,$index)" :key="$index">{{item.tab_name}}</text>
            </scroller>
        </div>
        <div class="content">
            <scroller class="scroller" :style="{'height':deviceHeight-400}">
                <!--<refresh @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">-->
                <!--<text>Refreshing ...</text>-->
                <!--</refresh>-->
                <router-view></router-view>
            </scroller>
        </div>
        <TabBar></TabBar>
    </div>
</template>
<style scoped>
.page {
    background-color: #fafafa;
    position: relative;
}

.header {
    height: 160px;
    /*position: fixed;*/
    top: 0;
    right: 0;
    left: 0;
}

.search-box {
    height: 100px;
    justify-content: space-between;
    flex-direction: row;
}

.search-input {
    height: 70px;
    flex: 2;
    background-color: #fff;
    flex-grow: 1;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
    justify-content: center;
    margin-top: 10px;
    margin-top: 10px;
    margin-left: 30px;
    margin-right: 30px;
}

.placeholder {
    color: rgba(0, 0, 0, .3);
    font-size: 25px;
    margin-left: 20px;
}

.header-logo {
    margin-left: 20px;
    margin-top: 25px;
}

.header-user {
    margin-right: 20px;
    margin-top: 25px;
}

.header-menu {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 25px;
    padding-right: 25px;
}

.header-menu-item {
    font-size: 30px;
    color: #747474;
    margin-left: 20px;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom-style: solid;
    border-bottom-width: 4px;
    border-bottom-color: #fafafa;
}

.menu-item-active {
    border-bottom-color: #ed5b00;
    color: #ed5b00;
}

.scroller {
    width: 750px;
    margin-bottom: 50px;
    /*height: 750px;*/
}
</style>
